﻿@{
    ViewBag.Title = "HideShowAll";
    Layout = "~/Views/Shared/_Page.cshtml";
}

<style type="text/css">
	label {
		color: green;
        font-size: 20px;
	}

	#box {
        margin: 0 auto;
        border:3px double green;
        height:500px;
        width:500px;
        border-style:solid;
        background-color:lightgreen;
	}
</style>

<h2>Hide Show All</h2>

<div id="box"></div><br>

<div>
    <label>Effect's Method Name: </label>
    <select id="effectName">
		<option>hide</option>
		<option>show</option>
		<option>toggle</option>
		<option>fadeIn</option>
		<option>fadeTo</option>
		<option>fadeOut</option>
		<option>fadeToggle</option>
		<option>slideUp</option>
		<option>slideDown</option>
		<option>slideToggle</option>
	</select><br><br>

    <label>Duration:</label> 
	<select id="duration">
        <option value="500">0.5 Second</option>
		<option value="1000">1 Second</option>
		<option value="2000">2 Seconds</option>
		<option value="3000">3 Seconds</option>
		<option value="slow">Slow</option>
		<option value="fast">Fast</option>
	</select><br><br>

    <label>Opacity (For fadeTo) (Range: 0-1):</label> 
    <input type="text" id="txtOpacity" value="0.5"><br><br>
</div><br><br>

<input id="btnTestIt" type="button" value="Test It">
<input id="btnReset" type="button" value="Reset">
<script type="text/javascript">
    $(document).ready(function () {

        $("#btnTestIt").click(function () {
            var effectSelected = $("#effectName").val();
            var durationValue = $("#duration").val();
            var opacityValue = $("#txtOpacity").val();

            if (effectSelected == "hide") {
                $("#box").hide(durationValue);
            } else if (effectSelected == "show") {
                $("#box").show(durationValue);
            } else if (effectSelected == "toggle") {
                $("#box").toggle(durationValue);
            } else if (effectSelected == "fadeIn") {
                $("#box").fadeIn(durationValue);
            } else if (effectSelected == "fadeTo") {
                $("#box").fadeTo(durationValue, opacityValue);
            } else if (effectSelected == "fadeOut") {
                $("#box").fadeOut(durationValue);
            } else if (effectSelected == "fadeToggle") {
                $("#box").fadeToggle(durationValue);
            } else if (effectSelected == "slideUp") {
                $("#box").slideUp(durationValue); // hide with slide up animation
            } else if (effectSelected == "slideDown") {
                $("#box").slideDown(durationValue);// show with slide up animation
            } else if (effectSelected == "slideToggle") {
                $("#box").slideToggle(durationValue);
            }
        });

        $("#btnReset").click(function () {
            $("#box").show();
            $("#effectName").prop("selectedIndex", 0);
            $("#duration").prop("selectedIndex", 0);
            $("#txtOpacity").val(0.5);
        });
    });
</script>